<template>
  <div class="container">
    <div class="header-content"><h3>密码修改中心</h3></div>
    <div class="password-content">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="初始密码" prop="originPassword">
          <el-input
            type="password"
            v-model="ruleForm.originPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="ruleForm.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input
            type="password"
            v-model="ruleForm.checkPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            round
            @click="submitForm('ruleForm')"
            >确认修改</el-button
          >
          <el-button
            type="primary"
            size="small"
            round
            @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updatePassword, userLogOut } from "@/api";
import { removeToken } from "@/utils/token";
export default {
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        originPassword: "",
        newPassword: "",
        checkPassword: "",
      },
      rules: {
        originPassword: [{ validator: validatePass1, trigger: "blur" }],
        newPassword: [{ validator: validatePass2, trigger: "blur" }],
        checkPassword: [{ validator: validatePass3, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updateUserOrManagerPassword();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async updateUserOrManagerPassword() {
      let params = {
        originPassword: this.ruleForm.originPassword,
        newPassword: this.ruleForm.newPassword,
      };
      let res = await updatePassword(params);
      if (res.code == 0) {
        //退出登录
        this.$message.success(res.msg);
        this.logout();
      } else {
        this.$message.error(res.msg);
      }
    },
    async logout() {
      let res = await userLogOut();
      removeToken();
      this.$store.dispatch("user/logOut");
      this.$router.push({ name: "login" });
    },
  },
};
</script>

<style  lang="less" scoped>
.container {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .password-content {
    padding-top: 20px;
    width: 70%;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
  }
}
</style>